<template>
	<div class="authorArticle_content">
		<!-- 头部信息 -->

		<div class="authorArticle_content_header" @click="openAuthorPage">
			<div class="authorArticle_content_index maincolor">
				{{ index + 1 }}
			</div>
			<div class="authorArticle_content_avatar">
				<img :src="item.author_avatar_img" alt="用户头像" />
			</div>
			<div class="authorArticle_content_user">
				<div class="authorArticle_content_user_name">
					{{ item.author_name }}
				</div>
				<div class="authorArticle_content_user_desc ellipsis_multiple">
					{{ item.author_desc }}
				</div>
			</div>
		</div>

		<!-- 内容区域 -->
		<div
			class="authorArticle_content_article"
			v-if="item.latest_article_title"
			@click="openContentPage"
		>
			<div class="authorArticle_content_article_title">
				{{ item.latest_article_title }}
			</div>
			<div class="authorArticle_content_article_desc ellipsis_3">
				{{ item.latest_article_illustrate }}
			</div>
		</div>

		<!-- 时间戳 -->
		<div class="authorArticle_content_article_timestamp">
			{{ item.latest_article_time }}
		</div>
	</div>
</template>

<script>
import { newBus } from "@/components/pc/topHeader2.vue";

export default {
	props: ["item", "index"],
	data() {
		return {
			allData: [],
			localLanguage: 1,
		};
	},
	mounted() {
		// 监听全局通知并更新组件状态
		newBus.$on("global-notification", (data) => {
			let localLanguage = sessionStorage.getItem("localLanguage");
			if (localLanguage == "繁体中文") {
				this.localLanguage = 1;
			} else if (localLanguage == "english") {
				this.localLanguage = 2;
			} else {
				this.localLanguage = 0;
			}
		});

		// 初始化语言设置
		let localLanguage = sessionStorage.getItem("localLanguage");
		if (localLanguage == "繁体中文") {
			this.localLanguage = 1;
		} else if (localLanguage == "english") {
			this.localLanguage = 2;
		} else {
			this.localLanguage = 0;
		}
	},
	methods: {
		openAuthorPage() {
			const route = this.$router.resolve({
				name: "/home_wz",
				params: { id: this.item.author_id },
			});
			window.open(route.href, "_blank");
		},

		openContentPage() {
			const route = this.$router.resolve({
				name: "/gw_detail",
				params: { id: this.item.latest_article_id },
			});
			window.open(route.href, "_blank");
		},
	},
};
</script>

<style scoped>
.authorArticle_content {
	position: relative;
	overflow: hidden;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 10px; /* 圆角 */

	/* 用 ::before 伪元素实现渐变边框 */
}
.authorArticle_content::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 10px; /* 和父元素一致 */
	padding: 1px; /* 边框宽度 */
	background: linear-gradient(
		55deg,
		rgba(153, 69, 255, 0.8) -1%,
		rgba(135, 82, 243, 0.8) 22%,
		rgba(84, 151, 213, 0.8) 44%,
		rgba(67, 180, 202, 0.8) 55%,
		rgba(40, 224, 185, 0.8) 69%,
		rgba(25, 251, 155, 0.8) 96%
	);
	-webkit-mask: linear-gradient(#fff, #fff) content-box,
		linear-gradient(#fff, #fff);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none; /* 避免遮挡点击事件 */
}

.authorArticle_content_header {
	display: flex;
	align-items: top;
	margin-bottom: 10px;
}

.authorArticle_content_index {
	flex-shrink: 0; /* 禁止压缩 */

	width: 24px;
	height: 24px;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	text-align: center;
	font-size: 18px;
	font-weight: 500;
}

.authorArticle_content_index::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 12px; /* 和父元素一致 */
	padding: 2px; /* 边框宽度 */
	background: linear-gradient(
		55deg,
		rgba(153, 69, 255, 0.8) -1%,
		rgba(135, 82, 243, 0.8) 22%,
		rgba(84, 151, 213, 0.8) 44%,
		rgba(67, 180, 202, 0.8) 55%,
		rgba(40, 224, 185, 0.8) 69%,
		rgba(25, 251, 155, 0.8) 96%
	);
	-webkit-mask: linear-gradient(#fff, #fff) content-box,
		linear-gradient(#fff, #fff);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none; /* 避免遮挡点击事件 */
}

.authorArticle_content_avatar {
	flex-shrink: 0; /* 禁止压缩 */

	width: 76px;
	height: 76px;
	border-radius: 38px;
	margin-top: 10px;

	overflow: hidden;
	position: relative;
}

.authorArticle_content_avatar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 38px; /* 和父元素一致 */
	padding: 2px; /* 边框宽度 */
	background: linear-gradient(
		55deg,
		rgba(153, 69, 255, 0.8) -1%,
		rgba(135, 82, 243, 0.8) 22%,
		rgba(84, 151, 213, 0.8) 44%,
		rgba(67, 180, 202, 0.8) 55%,
		rgba(40, 224, 185, 0.8) 69%,
		rgba(25, 251, 155, 0.8) 96%
	);
	-webkit-mask: linear-gradient(#fff, #fff) content-box,
		linear-gradient(#fff, #fff);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none; /* 避免遮挡点击事件 */
}

.authorArticle_content_avatar img {
	height: 100%;
	width: 100%;
}
.authorArticle_content_user {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.authorArticle_content_user_name {
	font-size: 18px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: normal;
	color: #ffffff;
}

.authorArticle_content_user_desc {
	font-size: 14px;
	margin-left: 20px;
	font-weight: normal;
	line-height: 20px;
	text-transform: capitalize;
	letter-spacing: normal;
	/* 描边色/描边浅色 */
	color: #d8d8d8;
}

.authorArticle_content_article {
	padding-left: 14px;
	padding-right: 14px;
	padding-top: 10px;
	padding-bottom: 10px;
	overflow: hidden;
	position: relative;
	border-radius: 9px;
	background: linear-gradient(
			180deg,
			rgba(128, 0, 255, 0.5) -13%,
			rgba(129, 49, 49, 0) 21%,
			rgba(129, 49, 49, 0) 87%,
			rgba(0, 255, 191, 0.5) 107%
		),
		linear-gradient(
			69deg,
			#9945ff -13%,
			rgba(135, 82, 243, 0) 17%,
			rgba(84, 151, 213, 0) 49%,
			rgba(67, 180, 202, 0) 68%,
			rgba(40, 224, 185, 0) 87%,
			#19fb9b 111%
		);
	/* 专栏/头像渐变 */
	border: 1px solid;
}

.authorArticle_content_article::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 10px; /* 和父元素一致 */

	-webkit-mask: linear-gradient(#fff, #fff) content-box,
		linear-gradient(#fff, #fff);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none; /* 避免遮挡点击事件 */
}

.authorArticle_content_article_title {
	font-size: 18px;
	font-weight: 500;
	line-height: 27px;
	letter-spacing: normal;
	color: #ffffff;
}

.authorArticle_content_article_desc {
	margin-top: 10px;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
	text-transform: capitalize;
	letter-spacing: normal;
	/* 描边色/描边浅色 */
	color: #d8d8d8;
}

.authorArticle_content_article_timestamp {
	margin-top: 10px;
	text-align: right;
	font-size: 12px;
	font-weight: 500;
	line-height: 27px;
	letter-spacing: normal;
	/* 正文色/正文辅助色 */
	color: #767676;
}
</style>
